$(function () {

	map();

	leidatu();
	wuran();
	huaxing();
	zhexian();

	//大屏

	function leida1() {
		var myChart = echarts.init(document.getElementById('map'));


		myChart.setOption(option);
		window.addEventListener("resize", function () {
			myChart.resize();
		});

	}


})


function map() {
	var myChart = echarts.init(document.getElementById('map'));
	let iconRQ = "image://"

	let data = [{
		name: "",
		value: [116.24, 39.55, 100]
	},
		// {
		//     name: "深圳",
		//     value: [114.271522, 22.753644]
		// },
		//
		// {
		//     name: "重庆",
		//     value: [106.54, 29.59]
		// },
		// {
		//     name: "浙江",
		//     value: [120.19, 30.26]
		// },
		// {
		// 	name: "上海",
		// 	value: [121.4648, 31.2891]
		// },


	]
	let LableData = [
		{
			name: "北京",
			coords: [
				[116.24, 39.55, 100],
				[120.24, 46.55, 100]
			], // 线条位置[开始位置，结束位置]
			value: [1021, 120]
		},
		// {
		// 	name: "深圳",
		// 	coords: [
		// 		[114.271522, 22.753644],
		// 		[118.24, 18.55, 100]
		// 	], // 线条位置[开始位置，结束位置]
		// 	value: [1021, 120]
		// },
		// {
		// 	name: "重庆",
		// 	coords: [
		// 		[106.54, 29.59],
		// 		[104.24, 35.55]
		// 	], // 线条位置[开始位置，结束位置]
		// 	value: [1021, 120]
		// },
		// {
		// 	name: "浙江",
		// 	coords: [
		// 		[120.19, 30.26],
		// 		[125.24, 27.55, 100]
		// 	], // 线条位置[开始位置，结束位置]
		// 	value: [1021, 120]
		// },
		// {
		// 	name: "上海",
		// 	coords: [
		// 		[121.4648, 31.2891],
		// 		[122.4648, 32.2891]
		// 	], // 线条位置[开始位置，结束位置]
		// 	value: [1201, 60]
		// },
	];

	option = {
		/*backgroundColor: '#000f1e',*/
		geo: {
			map: 'china',
			aspectScale: 1,
			layoutCenter: ["50%", "50%"], //地图位置
			layoutSize: '100%',
			itemStyle: {
				normal: {
					//shadowColor: '#276fce',
					// shadowOffsetX: 0,
					// shadowOffsetY: 15,
					opacity: 0,
				},
				emphasis: {
					areaColor: '#276fce',

				}
			},
			regions: [{
				name: '南海诸岛',
				itemStyle: {
					areaColor: 'rgba(0, 10, 52, 1)',

					borderColor: 'rgba(0, 10, 52, 1)',
					normal: {
						opacity: 0,
						label: {
							show: false,
							color: "#009cc9",
						}
					},


				},
				label: {
					show: false,
					color: '#FFFFFF',
					fontSize: 12,
				},


			}],

		},
		// geo: {
		// 	map: 'china',
		// 	label: {
		// 		show: true,
		// 		position: 'insideLeft',
		// 		color: 'white',
		// 		fontSize: '10',
		// 		emphasis: {
		// 			show: true
		// 		}
		// 	},
		// 	roam: true,
		// 	silent: true,
		// 	itemStyle: {
		// 		normal: {
		// 			areaColor: 'transparent',
		// 			borderColor: '#0e94eb',
		// 			shadowBlur: 10,
		// 			shadowColor: '#0e94ea'
		// 		}
		// 	},
		// 	left: 10,
		// 	right: 10
		// },
		series: [
			// 常规地图
			{
				type: 'map',
				mapType: 'china',
				aspectScale: 0.85,
				layoutCenter: ["50%", "50%"], //地图位置
				layoutSize: '100%',
				zoom: 1, //当前视角的缩放比例
				// roam: true, //是否开启平游或缩放
				scaleLimit: { //滚轮缩放的极限控制
					min: 1,
					max: 2
				},
				itemStyle: {
					normal: {
						areaColor: 'rgba(128, 128, 128, 0)',
						borderColor: '#1BBDF3',
						borderWidth: 1.5
					},
					emphasis: {
						areaColor: '#02102b',
						label: {
							color: "#fff"
						}
					}
				},
			},
			// { //首都星图标
			// 	name: '首都',
			// 	type: 'scatter',
			// 	coordinateSystem: 'geo',
			// 	data: [{
			// 		name: '首都',
			// 		value: [116.24, 41.55, 100],
			//
			// 	},],
			// 	symbol: iconRQ,
			// 	symbolSize: 20,
			// 	label: {
			// 		normal: {
			// 			show: false,
			//
			// 		},
			// 		emphasis: {
			// 			show: false
			// 		}
			// 	},
			//
			// },

			// 区域散点图
			{
				type: 'effectScatter',
				coordinateSystem: 'geo',
				zlevel: 2,
				symbolSize: 10,
				rippleEffect: { //坐标点动画
					period: 3,
					scale: 5,
					brushType: 'fill'
				},
				label: {
					normal: {
						show: true,
						position: 'right',
						formatter: '{b}',
						color: '#b3e2f2',
						fontWeight: "bold",
						fontSize: 16
					}
				},

				data: data,
				itemStyle: { //坐标点颜色
					normal: {
						show: true,
						color: '#ff8003',
						shadowBlur: 20,
						shadowColor: '#fff'
					},
					emphasis: {
						areaColor: '#f00'
					}
				},

			},


			/*{
               name: 'lable',
               type: 'scatter',
               coordinateSystem: 'geo',
               symbol: 'pin',
               symbolSize: [50,50],
               label: {
                   normal: {
                       show: true,
                       textStyle: {
                           color: '#fff',
                           fontSize: 9,
                       },
                       formatter (value){
                           return value.data.value[1]
                       }
                   }
               },
               itemStyle: {
                   normal: {
                       color: '#D8BC37', //标志颜色
                   }
               },
               data: data,
               showEffectOn: 'render',
               rippleEffect: {
                   brushType: 'stroke'
               },
               hoverAnimation: true,
               zlevel: 1
           },*/
			{
				type: 'lines',
				zlevel: 2,
				mapType: 'china',
				symbol: 'none',
				effect: {
					show: true,
					period: 1.5,
					trailLength: 0.1,
					color: '#FFD320',
					symbol: 'pin',
					symbolSize: 6,
					trailLength: 0.5

				},
				lineStyle: {
					normal: {
						color: '#EFE9B6',
						width: 1,
						opacity: 0.4,
						curveness: 0.2
					}
				},
				data: [
					{
						coords: [
							[115.655772, 39.018781], // 流入位置
							[121.4648, 31.2891] // 流出位置

						]
					},
					{
						coords: [
							[115.655772, 39.018781],
							[106.550483, 29.563707],
						]
					},
					{
						coords: [
							[115.655772, 39.018781],
							[116.550483, 24.563707],
						]
					}
				]
			},

			{

				type: 'lines',
				zlevel: 3,
				symbol: 'circle',
				symbolSize: [5, 5],
				color: '#ff8003',
				opacity: 1,
				label: {
					show: true,
					padding: [10, 20],
					color: '#fff',
					backgroundColor: "#1a3961",
					borderColor: '#aee9fb',
					borderWidth: 1,
					borderRadius: 6,
					formatter(params) {

						let arr = [params.name, "合同金额：" + params.value[1] + "万元", "服务周期：" + params.value[0] + "月"];
						return arr.join("\n")
					},
					textStyle: {
						align: 'left',
						lineHeight: 20,
					}
					/* normal: {

                         textStyle: {
                             color: '#fff',
                             fontSize: 9,
                         },
                         formatter (value){
                             return value.data.value[2]
                         },

                     }*/
				},
				lineStyle: {
					type: 'solid',
					color: '#fff',
					width: 0.5,
					opacity: 1,

				},
				data: LableData,


			},
		]
	};

	myChart.on('click', function (params) {
		console.log(params);
	});
	myChart.setOption(option);
	window.addEventListener("resize", function () {
		myChart.resize();
	});

}


function leidatu() {
	// var imgPath = ['http://bmob-cdn-15355.b0.upaiyun.com/2017/12/01/bee4341c4089af7980b87074a77479ad.png']
	var myChart = echarts.init(document.getElementById('leida'));
	option = {

		color: ['#00c2ff', '#f9cf67', '#e92b77'],
		legend: {
			show: true,
			// icon: 'circle',//图例形状
			bottom: 0,
			center: 0,
			itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
			itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
			itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
			textStyle: {
				fontSize: 12,
				color: '#ade3ff'
			},
			data: ['2016', '2017', '2018'],
		},
		radar: [{

			indicator: [{
				text: '重庆市',
				max: 100
			},
				{
					text: '北京市',
					max: 100
				},
				{
					text: '上海市',
					max: 100
				},
				{
					text: '广东省',
					max: 100
				},
				{
					text: '浙江省',
					max: 100
				}
			],

			textStyle: {
				color: 'red'
			},
			center: ['50%', '50%'],
			radius: 60,
			startAngle: 90,
			splitNumber: 3,
			orient: 'horizontal', // 图例列表的布局朝向,默认'horizontal'为横向,'vertical'为纵向.
			// shape: 'circle',
			// backgroundColor: {
			//     image:imgPath[0]
			// },
			name: {
				formatter: '{value}',
				textStyle: {
					fontSize: 12, //外圈标签字体大小
					color: '#5b81cb' //外圈标签字体颜色
				}
			},
			splitArea: { // 坐标轴在 grid 区域中的分隔区域，默认不显示。
				show: true,
				areaStyle: { // 分隔区域的样式设置。
					color: ['#141c42', '#141c42'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
				}
			},
			// axisLabel:{//展示刻度
			//     show: true
			// },
			axisLine: { //指向外圈文本的分隔线样式
				lineStyle: {
					color: '#153269'
				}
			},
			splitLine: {
				lineStyle: {
					color: '#113865', // 分隔线颜色
					width: 1, // 分隔线线宽
				}
			}
		},],
		series: [{
			name: '雷达图',
			type: 'radar',
			itemStyle: {
				emphasis: {
					lineStyle: {
						width: 4
					}
				}
			},
			data: [{
				name: '2016',
				value: [85, 65, 55, 90, 82],
				areaStyle: {
					normal: { // 单项区域填充样式
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 1, //左
							y2: 1, //上
							colorStops: [{
								offset: 0,
								color: '#00c2ff'
							}, {
								offset: 0.5,
								color: 'rgba(0,0,0,0)'
							}, {
								offset: 1,
								color: '#00c2ff'
							}],
							globalCoord: false
						},
						opacity: 1 // 区域透明度
					}
				},
				symbolSize: 2.5, // 单个数据标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
				label: {                    // 单个拐点文本的样式设置
					normal: {
						show: true,             // 单个拐点文本的样式设置。[ default: false ]
						position: 'top',        // 标签的位置。[ default: top ]
						distance: 2,            // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。[ default: 5 ]
						color: '#6692e2',          // 文字的颜色。如果设置为 'auto'，则为视觉映射得到的颜色，如系列色。[ default: "#fff" ]
						fontSize: 14,           // 文字的字体大小
						formatter: function (params) {
							return params.value;
						}
					}
				},
				itemStyle: {
					normal: { //图形悬浮效果
						borderColor: '#00c2ff',
						borderWidth: 2.5
					}
				},
				// lineStyle: {
				//     normal: {
				//         opacity: 0.5// 图形透明度
				//     }
				// }
			}, {
				name: '2017',
				value: [50, 20, 45, 30, 75],
				symbolSize: 2.5,
				itemStyle: {
					normal: {
						borderColor: '#f9cf67',
						borderWidth: 2.5,
					}
				},
				areaStyle: {
					normal: { // 单项区域填充样式
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 1, //左
							y2: 1, //上
							colorStops: [{
								offset: 0,
								color: '#f9cf67'
							}, {
								offset: 0.5,
								color: 'rgba(0,0,0,0)'
							}, {
								offset: 1,
								color: '#f9cf67'
							}],
							globalCoord: false
						},
						opacity: 1 // 区域透明度
					}
				},
				// lineStyle: {
				//     normal: {
				//         opacity: 0.5// 图形透明度
				//     }
				// }
			}, {
				name: '2018',
				value: [37, 80, 12, 50, 25],
				symbolSize: 2.5,
				itemStyle: {
					normal: {
						borderColor: '#e92b77',
						borderWidth: 2.5,
					}
				},
				areaStyle: {
					normal: { // 单项区域填充样式
						color: {
							type: 'linear',
							x: 0, //右
							y: 0, //下
							x2: 1, //左
							y2: 1, //上
							colorStops: [{
								offset: 0,
								color: '#e92b77'
							}, {
								offset: 0.5,
								color: 'rgba(0,0,0,0)'
							}, {
								offset: 1,
								color: '#e92b77'
							}],
							globalCoord: false
						},
						opacity: 1 // 区域透明度
					}
				}
			}]
		},]
	};


	myChart.setOption(option);
}

function wuran() {

	var myChart = echarts.init(document.getElementById('wuran'));
	var salvProName = ["企业总数", "废气企业", "废水企业", "铅污染", "铬污染"];
	var salvProValue = [117, 74, 72, 67, 55];
	var salvProMax = [];//背景按最大值
	for (let i = 0; i < salvProValue.length; i++) {
		salvProMax.push(salvProValue[0])
	}
	option = {

		grid: {
			left: '2%',
			right: '2%',
			bottom: '-6%',
			top: '8%',
			containLabel: true
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'none'
			},
			formatter: function (params) {
				return params[0].name + ' : ' + params[0].value
			}
		},
		xAxis: {
			show: false,
			type: 'value'
		},
		yAxis: [{
			type: 'category',
			inverse: true,
			axisLabel: {
				show: true,
				textStyle: {
					color: '#fff'
				},
			},
			splitLine: {
				show: false
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			data: salvProName
		}, {
			type: 'category',
			inverse: true,
			axisTick: 'none',
			axisLine: 'none',
			show: true,
			axisLabel: {
				textStyle: {
					color: '#ffffff',
					fontSize: '12'
				},
			},
			data: salvProValue
		}],
		series: [{
			name: '值',
			type: 'bar',
			zlevel: 1,
			itemStyle: {
				normal: {
					barBorderRadius: 30,
					color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
						offset: 0,
						color: 'rgb(57,89,255,1)'
					}, {
						offset: 1,
						color: 'rgb(46,200,207,1)'
					}]),
				},
			},
			barWidth: 10,
			data: salvProValue
		},
			{
				name: '背景',
				type: 'bar',
				barWidth: 10,
				barGap: '-100%',
				data: salvProMax,
				itemStyle: {
					normal: {
						color: 'rgba(24,31,68,1)',
						barBorderRadius: 30,
					}
				},
			},
		]
	};

	myChart.setOption(option);


}

function huaxing() {
	var myChart = echarts.init(document.getElementById('huaxing'));

	var dataStyle = {
		normal: {
			label: {
				show: false
			},
			labelLine: {
				show: false
			},
			shadowBlur: 0,
			shadowColor: '#203665'
		}
	};
	option = {

		series: [{
			name: '第一个圆环',
			type: 'pie',
			clockWise: false,
			radius: [45, 55],
			itemStyle: dataStyle,
			hoverAnimation: false,
			center: ['15%', '50%'],
			data: [{
				value: 25,
				label: {
					normal: {
						rich: {
							a: {
								color: '#3a7ad5',
								align: 'center',
								fontSize: 14,
								fontWeight: "bold"
							},
							b: {
								color: '#fff',
								align: 'center',
								fontSize: 12
							}
						},
						formatter: function (params) {
							return "{b|饮用水质}\n\n" + "{a|" + params.value + "个}" + "\n\n{b|增长2%}";
						},
						position: 'center',
						show: true,
						textStyle: {
							fontSize: '12',
							fontWeight: 'normal',
							color: '#fff'
						}
					}
				},
				itemStyle: {
					normal: {
						color: '#2c6cc4',
						shadowColor: '#2c6cc4',
						shadowBlur: 0
					}
				}
			}, {
				value: 75,
				name: 'invisible',
				itemStyle: {
					normal: {
						color: '#24375c'
					},
					emphasis: {
						color: '#24375c'
					}
				}
			}]
		}, {
			name: '第二个圆环',
			type: 'pie',
			clockWise: false,
			radius: [45, 55],
			itemStyle: dataStyle,
			hoverAnimation: false,
			center: ['50%', '50%'],
			data: [{
				value: 50,
				label: {
					normal: {
						rich: {
							a: {
								color: '#d03e93',
								align: 'center',
								fontSize: 14,
								fontWeight: "bold"
							},
							b: {
								color: '#fff',
								align: 'center',
								fontSize: 12
							}
						},
						formatter: function (params) {
							return "{b|生活用水}\n\n" + "{a|" + params.value + "个}" + "\n\n{b|增长2%}";
						},
						position: 'center',
						show: true,
						textStyle: {
							fontSize: '12',
							fontWeight: 'normal',
							color: '#fff'
						}
					}
				},
				itemStyle: {
					normal: {
						color: '#ef45ac',
						shadowColor: '#ef45ac',
						shadowBlur: 0
					}
				}
			}, {
				value: 50,
				name: 'invisible',
				itemStyle: {
					normal: {
						color: '#412a4e'
					},
					emphasis: {
						color: '#412a4e'
					}
				}
			}]
		}, {
			name: '第三个圆环',
			type: 'pie',
			clockWise: false,
			radius: [45, 55],
			itemStyle: dataStyle,
			hoverAnimation: false,
			center: ['85%', '50%'],
			data: [{
				value: 75,
				label: {
					normal: {
						rich: {
							a: {
								color: '#603dd0',
								align: 'center',
								fontSize: 14,
								fontWeight: "bold"
							},
							b: {
								color: '#fff',
								align: 'center',
								fontSize: 12
							}
						},
						formatter: function (params) {
							return "{b|自来水}\n\n" + "{a|" + params.value + "个}" + "\n\n{b|增长2%}";
						},
						position: 'center',
						show: true,
						textStyle: {
							fontSize: '12',
							fontWeight: 'normal',
							color: '#fff'
						}
					}
				},
				itemStyle: {
					normal: {
						color: '#613fd1',
						shadowColor: '#613fd1',
						shadowBlur: 0
					}
				}
			}, {
				value: 25,
				name: 'invisible',
				itemStyle: {
					normal: {
						color: '#453284'
					},
					emphasis: {
						color: '#453284'
					}
				}
			}]
		}]
	}

	myChart.setOption(option);


}


function zhexian() {
	var myChart = echarts.init(document.getElementById('zhexian'));

	dataText = [{
		name: '上游流速',
		type: 'line',
		smooth: true,
		symbolSize: 8,
		data: [127, 224, 120, 278, 227, 237],
		barWidth: '30%',
		itemStyle: {
			normal: {
				color: '#f0c725'
			}
		}
	}, {
		name: '下游流速',
		type: 'line',
		smooth: true,
		symbolSize: 8,
		data: [27, 124, 70, 178, 127, 157],
		barWidth: '30%',
		itemStyle: {
			normal: {
				color: '#16f892'
			}
		}
	},
		{
			name: '平均流速',
			type: 'line',
			smooth: true,
			symbolSize: 8,
			data: [127, 74, 120, 99, 130, 355],
			barWidth: '30%',
			itemStyle: {
				normal: {
					color: '#0BE3FF'
				}
			}
		}
	]
	dataObj = {
		year: ['2015', '2016', '2017', '2018', '2019', '2020'],
		data: {
			value: [{
				name: '上游流速',
				value: [127, 224, 250, 278, 227, 355]
			}, {
				name: '下游流速',
				value: [27, 124, 70, 178, 127, 157]
			}, {
				name: '平均流速',
				value: [127, 74, 120, 99, 130, 50]
			}]
		}
	}
	let dataArr = []

	dataObj.data.value.map(item => {
		let datachild = []
		let newArr = {
			name: item.name,
			type: 'line',
			smooth: true,
			symbolSize: 8,
			data: item.value,
			barWidth: '30%',
			itemStyle: {
				normal: {
					color: item.name === '上游流速' ? '#f0c725' : item.name === '下游流速' ? '#0BE3FF' : '#16f892'
				}
			}
		}

		dataArr.push(newArr)
	})
	option = {
		color: ['#f0c725', '#16f892'],
		title: {
			left: 'center',
			text: '',
			textStyle: {
				color: '#FFFFFF',
				fontSize: '14',
			}
		},
		tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
				type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			}
		},
		legend: {
			x: 'center',
			top: '25',
			textStyle: {
				color: '#c1cadf',
				"fontSize": 14
			}
		},
		grid: {
			left: '6%',
			right: '4%',
			top: '25%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			show: true,
			orient: 'vertical',
			x: 'right',
			y: 'center'
		},
		xAxis: [{
			type: 'category',
			boundaryGap: false,
			data: dataObj.year,
			axisLine: {
				lineStyle: {
					color: 'rgba(240,199,37,0.5)'
				}
			},
			axisLabel: {
				interval: 0,
				color: '#c1cadf',
				fontSize: '15'
			}
		}],
		yAxis: [{
			type: 'value',
			name: '(m3)',
			nameTextStyle: {
				color: '#c1cadf',
				align: 'right',
				lineHeight: 10
			},
			axisLine: {
				lineStyle: {
					color: 'rgba(240,199,37,0.5)'
				}
			},
			axisLabel: {
				interval: 0,
				color: '#c1cadf',
				fontSize: '15'
			},
			splitLine: {
				show: false
			}
		}],
		series: dataArr
	};
	//大屏
	/*var myChart = echarts.init(document.getElementById('channel_handle_detail'));
    myChart.clear();
    if(data.handleTimeData.length>0){
        myChart.setOption(option);
    }else{
        noDataTip($("#channel_handle_detail"));
    }*/
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option);
	window.addEventListener("resize", function () {
		myChart.resize();
	});
}
